<template>
  <div class="navs-group"  >
    <div class="h_n_b_o_meun_left">
      <img v-for="(item,index) in images" :key="index" :src="item" alt="" width="516px" height="260px"/>
    </div>

    <div class="h_n_b_o_meun_right">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="h_n_b_o_meun_center"
      >
        <a href="">{{ item.label }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import haiermenu from "@/assets/haiermenu.json";
export default {
  data() {
    return {
     
      list: haiermenu,
      images:[
          require("../../public/images/tag-2/a01.png"),
        //   require("../../public/images/tag-2/a02.png"),
        //   require("../../public/images/tag-2/a03.png"),
        //   require("../../public/images/tag-2/a04.png"),
        //   require("../../public/images/tag-2/a05.png"),
        //   require("../../public/images/tag-2/a06.png")
      ]
    };
  },
  methods:{
      
  }
};
</script>

<style scoped>
.navs-group{
    height: 400px;
    width: 100%;
    background-color: rgb(41, 55, 81);
}
.h_n_b_o_meun_left{
    width: 40%;
    height: 300px;
    margin: 80px 80px;
    display: inline-block;
    position: absolute;
    left: 0;
}
.h_n_b_o_meun_left>img{
    margin: 0px 50px;
}
.h_n_b_o_meun_right{
    position: absolute;
    display: inline-block;
    margin: 70px 80px;
    width: 60%;
    height: 300px;
    right: 0;
}
.h_n_b_o_meun_center {
    margin-left: 40px;
    display: inline-block;  
}
.h_n_b_o_meun_center > a {
  font-style: inherit;
  font-size: 1em;
  text-decoration: none;
  color: rgb(117, 108, 108);
}
.h_n_b_o_meun_center > a:hover {
  cursor: pointer;
  color: rgb(12, 31, 128);
}
</style>